<template>
  <div>
    <div class="echarts_cover">
      <!-- 第一张关于学历占比的可视化图表 -->
      <div class="center_cover">
        <div id="majorEcharts"></div>
      </div>
      <el-button class="btn1" @click="showSelect" v-if="series.length > 0"
        >进入筛选</el-button
      >
    </div>
    <el-dialog title="筛选条件" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form">
        <el-form-item label="请选择性别" :label-width="formLabelWidth">
          <el-select v-model="form.work_sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择学历" :label-width="formLabelWidth">
          <el-select v-model="form.work_xueli" placeholder="请选择学历">
            <el-option label="本科" value="本科"></el-option>
            <el-option label="研究生" value="研究生"></el-option>
            <el-option label="博士" value="博士"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="毕业时间" :label-width="formLabelWidth">
          <el-select v-model="form.work_biye_time" placeholder="请选择毕业时间">
            <el-option label="2020" value="2020"></el-option>
            <el-option label="2019" value="2019"></el-option>
            <el-option label="2018" value="2018"></el-option>
            <el-option label="2017" value="2017"></el-option>
            <el-option label="2016" value="2016"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm()">清 空</el-button>
        <el-button type="primary" @click="handleChange()">筛 选</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllMajorData } from "@/api/data";
export default {
  data() {
    return {
      formLabelWidth: "120px",
      majorArr: [],
      series: [],
      dialogFormVisible: false,
      form: {
        work_biye_time: "2020",
        work_xueli: "",
        work_sex: "",
      },
    };
  },
  mounted() {
    // 获取全部的学院信息
    this.handleChange();
  },
  methods: {
    // 进入筛选
    showSelect() {
      this.dialogFormVisible = true;
    },
    // 清空条件
    resetForm() {
      this.form = {
        work_biye_time: "2020",
        work_xueli: "",
        work_sex: "",
      };
    },
    // 获取数据
    async handleChange() {
      if (this.dialogFormVisible == true) {
        this.dialogFormVisible = false;
      }

      let data = await getAllMajorData(this.form);
      this.series = data.data.series;
      this.majorArr = data.data.majorArr;
      this.source = data.data;
      this.xuanran();
    },
    // 渲染第一张图表
    xuanran() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("majorEcharts"));

      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
           toolbox: {
          show: true,
           orient: "vertical",
          left: "left",
          top: "top",
            feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: this.$store.getters.isShow },
          },
        
        },
        legend: {
          data: ["待就业", "就业", "升学", "灵活就业"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: this.majorArr,
        },
        series: this.series,
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts_cover {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#majorEcharts {
  width: 900px;
  height: 1000px;
  margin-left: 30px;
}
</style>